<template>
  <div class="common-layout" style="background-color: #f5f7fa;">
    <el-container>
      <!-- 头部区域 -->
      <el-header class="main-header">
        <div class="header-content">
          <div class="doctor-info">
            <h3>陈医生</h3>
            <span class="sub-title">全科医生 | 南明区慢病管理团队</span>
          </div>
          <div class="patient-count">
            管理患者人数：<span class="count-number">88</span>
          </div>
        </div>
      </el-header>

      <!-- 疾病统计卡片 -->
      <el-main class="disease-stats">
        <div class="stats-container">
          <el-card 
            v-for="(disease, index) in diseaseList" 
            :key="index"
            class="disease-card"
            :style="{ backgroundColor: cardColors[index] }"
          >
            <div class="card-content">
              <div class="disease-title">{{ disease.name }} {{ disease.count }}人</div>
              <div class="risk-levels">
                <div 
                  v-for="(risk, rIndex) in disease.riskLevels" 
                  :key="rIndex"
                  class="risk-item"
                >
                  <el-tag 
                    :type="risk.type" 
                    effect="dark" 
                    round
                    class="risk-tag"
                  >
                    {{ risk.name }} {{ risk.count }}人
                  </el-tag>
                </div>
              </div>
            </div>
          </el-card>
        </div>
      </el-main>

      <!-- 主体内容区域 -->
      <el-container class="main-content">
        <!-- 左侧边栏 -->
        <el-aside width="330px" class="left-sidebar">
          <div class="sidebar-section">
            <h4 class="sidebar-title">待办事项</h4>
            <el-calendar v-model="calendarDate" class="custom-calendar">
              <template #date-cell="{ data }">
                <div class="calendar-day">
                  {{ data.day.split('-').slice(2).join('-') }}
                  <div class="disease-markers">
                    <span 
                      v-for="(marker, mIndex) in getDateMarkers(data.day)" 
                      :key="mIndex"
                      class="marker"
                      :class="markerClass(marker)"
                    >
                      {{ marker }}
                    </span>
                  </div>
                </div>
              </template>
            </el-calendar>
          </div>
           <!-- 待办事项模块 -->
    <div class="todo-list">
      <div class="todo-header">待办事项</div>
      <div class="todo-items">
        <div v-for="(item, index) in todoItems" :key="index" class="todo-item">
          <el-tag 
            :type="item.type === 'followup' ? 'primary' : 'info'" 
            effect="dark" 
            round
            class="todo-tag"
          >
            {{ item.typeName }}
          </el-tag>
          <div class="patient-info">
            <div class="name-line">
              <span class="name">{{ item.name }}</span>
              <span class="demo">| {{ item.gender }} | {{ item.age }}岁</span>
             
            </div>
            <div class="id-number">身份证号：{{ item.idNumber }}</div>
          </div>
        </div>
      </div>
    </div>
          <div class="followup-list">
            <h4 class="sidebar-title">待随访患者</h4>
            暂无
            <div 
              v-for="(patient, pIndex) in followupPatients" 
              :key="pIndex"
              class="patient-item"
            >
           
              <el-tag type="primary" round effect="dark" class="tag-followup">待随访</el-tag>
              <div class="patient-info">
                <span class="name">{{ patient.name }}</span>
                <span class="demo">| {{ patient.gender }} | {{ patient.age }}岁</span>
               
                <div class="id-number">身份证号：{{ patient.idNumber }}</div>
              </div>
            </div>
          </div>
        </el-aside>

        <!-- 中间表格区域 -->
        <el-main class="patient-table">
          <el-table :data="patientData" style="width: 560px" height="400px">
            <el-table-column prop="name" label="姓名" width="80" />
            <el-table-column prop="gender" label="性别" width="55" />
            <el-table-column prop="age" label="年龄" width="55" />
            <el-table-column prop="idNumber" label="身份证号" width="150" />
            <el-table-column prop="phone" label="联系电话" width="120" />
            <el-table-column label="慢病标签" width="120">
              <template #default="{ row }">
                <div class="disease-tags">
                  <el-tag
                    v-for="(tag, tIndex) in row.tags"
                    :key="tIndex"
                    size="small"
                    :type="tagType(tag)"
                  >
                    {{ tagMap[tag] }}
                  </el-tag>
                </div>
              </template>
            </el-table-column>
          </el-table>
        </el-main>

        <!-- 右侧预警信息 -->
        <el-aside width="280px" class="right-sidebar">
          <div class="warning-header">
            <span>预警信息</span>
          </div>
          <div class="warning-list">
            <div 
              v-for="(warning, wIndex) in warnings" 
              :key="wIndex"
              class="warning-item"
            >
              <div class="patient-info">
                <span class="name">{{ warning.name }}</span>
                <span class="demo">| {{ warning.gender }} | {{ warning.age }}岁</span>
              </div>
              <div class="warning-content">
                <el-tag type="danger" effect="light" size="small">高危预警</el-tag>
                <div class="warning-detail">{{ warning.detail }}</div>
              </div>
            </div>
          </div>
        </el-aside>
      </el-container>
    </el-container>
  </div>
</template>

<script setup>
import { ref } from 'vue'
const currentDate = ref(new Date('2020-04-01'))

const todoItems = ref([
  {
    type: 'followup',
    typeName: '已随访',
    name: '李晓明',
    gender: '男',
    age: 16,
    idNumber: '110101******1357',
    action: '随访'
  },
  {
    type: 'followup',
    typeName: '已随访',
    name: '王丽娟',
    gender: '女',
    age: 28,
    idNumber: '410101******8526',
    action: '随访'
  },


])
// 疾病数据
const diseaseList = ref([
  { 
    name: '高血压', 
    count: 26,
    riskLevels: [
      { name: '高危', count: 1, type: 'danger' },
      { name: '中危', count: 7, type: 'warning' },
      { name: '低危', count: 18, type: 'success' }
    ]
  },
  {
    name: '糖尿病',
    count: 30,
    riskLevels: [
      { name: '强化', count: 16, type: 'danger' },
      { name: '常规', count: 14, type: 'success' }
    ]
  },
  {
    name: '慢阻肺',
    count: 28,
    riskLevels: [
      { name: '高危', count: 4, type: 'danger' },
      { name: '中危', count: 7, type: 'warning' },
      { name: '低危', count: 17, type: 'success' }
    ]
  },
  {
    name: '脑卒中',
    count: 18,
    riskLevels: [
      { name: '高危', count: 2, type: 'danger' },
      { name: '中危', count: 3, type: 'warning' },
      { name: '低危', count: 13, type: 'success' }
    ]
  }
])

// 患者表格数据
const patientData = ref([
  {
    name: '李晓明',
    gender: '男',
    age: 16,
    idNumber: '110101******1357',
    phone: '13800004444',
    tags: ['stroke', 'diabetes']
  },
  {
    name: '王丽娟',
    gender: '女',
    age: 28,
    idNumber: '410101******8526',
    phone: '15896547852',
    tags: ['hypertension']
  },
  {
    name: '赵大勇',
    gender: '男',
    age: 28,
    idNumber: '780101******5947',
    phone: '14785214587',
    tags: ['stroke','diabetes']
  },
  {
    name: '陈淑芳',
    gender: '女',
    age: 28,
    idNumber: '250101******4589',
    phone: '13869524752',
    tags: ['hypertension','copd']
  },
])

// 预警信息
const warnings = ref([
  {
    name: '李晓明',
    gender: '男',
    age: 16,
    detail: '血压100/180mmHg，空腹血糖10mmol/L'
  },
  // 更多数据...
])

// 样式相关
const cardColors = ['#e6f3ff', '#fff7e6', '#e6ffe6', '#ffe6e6']
const tagMap = {
  hypertension: '压',
  diabetes: '糖',
  copd: '肺',
  stroke: '卒'
}

// 日历相关
const calendarDate = ref(new Date())
const calendarMarkers = {
  '2024-03-05': ['压'],
  '2024-03-10': ['糖', '肺'],
  // 更多日期标记...
}

const getDateMarkers = (date) => calendarMarkers[date] || []
const markerClass = (marker) => ({
  'marker-hypertension': marker === '压',
  'marker-diabetes': marker === '糖',
  'marker-copd': marker === '肺',
  'marker-stroke': marker === '卒'
})

const tagType = (tag) => {
  const types = {
    hypertension: 'danger',
    diabetes: 'warning',
    copd: 'success',
    stroke: 'info'
  }
  return types[tag]
}
</script>

<style scoped>
.main-header {
  height: 80px;
  background: #fff;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
  display: flex;
  align-items: center;
  padding: 0 30px;
}

.header-content {
  display: flex;
  justify-content: space-between;
  width: 100%;
}

.doctor-info h3 {
  margin: 0;
  font-size: 20px;
}

.sub-title {
  color: #666;
  margin-left: 10px;
}

.patient-count {
  font-size: 16px;
}

.count-number {
  font-weight: bold;
  color: #409EFF;
}

/* 疾病统计卡片样式 */
.stats-container {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  padding: 0 20px;
}

.disease-card {
  border-radius: 8px;
  border: none;
}

.card-content {
  padding: 15px;
}

.disease-title {
  font-size: 16px;
  font-weight: bold;
  margin-bottom: 10px;
}

.risk-levels {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.risk-tag {
  margin-right: 5px;
}

/* 侧边栏样式 */
.left-sidebar {
  background: #f8f9fa;
  padding: 20px;
  border-right: 1px solid #eee;
}

.sidebar-title {
  color: #666;
  margin: 15px 0;
}

.custom-calendar {
  background: #fff;
  border-radius: 8px;
  padding: 10px;
}

.calendar-day {
  text-align: center;
  height: 100%;
}

.disease-markers {
  margin-top: 2px;
}

.marker {
  display: inline-block;
  width: 18px;
  height: 18px;
  line-height: 18px;
  border-radius: 50%;
  font-size: 12px;
  color: white;
  margin: 1px;
}

.marker-hypertension { background: #f56c6c; }
.marker-diabetes { background: #e6a23c; }
.marker-copd { background: #67c23a; }
.marker-stroke { background: #909399; }

/* 患者表格样式 */
.patient-table {
  padding: 0 20px;
  background: #fff;
}

.disease-tags .el-tag {
  margin-right: 5px;
}

/* 预警信息样式 */
.right-sidebar {
  background: #fff;
  padding: 20px;
  border-left: 1px solid #eee;
}

.warning-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 15px;
}

.warning-item {
  background: #fff5f5;
  border-radius: 6px;
  padding: 10px;
  margin-bottom: 10px;
}

.warning-content {
  margin-top: 8px;
}

.warning-detail {
  color: #f56c6c;
  font-size: 12px;
  margin-top: 5px;
}

/* 随访列表样式 */
.followup-list {
  margin-top: 20px;
}

.patient-item {
  background: #fff;
  border-radius: 6px;
  padding: 10px;
  margin-bottom: 10px;
}

.tag-followup {
  vertical-align: top;
  margin-right: 8px;
}

.followup-btn {
  float: right;
  padding: 0;
}

.id-number {
  color: #999;
  font-size: 12px;
}

.left-sidebar {
  background: #fff;
  padding: 15px;
  box-shadow: 2px 0 5px rgba(0,0,0,0.1);
}

.calendar-section {
  margin-bottom: 20px;
}

.todo-list {
  border-top: 2px solid #f0f0f0;
}

.todo-header {
  padding: 10px 0;
  font-weight: bold;
  color: #333;
}

.todo-items {
  padding: 10px 0;
}

.todo-item {
  display: flex;
  align-items: flex-start;
  padding: 12px 0;
  border-bottom: 1px solid #f5f5f5;
}

.todo-tag {
  flex-shrink: 0;
  margin-right: 10px;
  width: 60px;
  text-align: center;
}

.patient-info {
  flex-grow: 1;
}

.name-line {
  display: flex;
  align-items: center;
  margin-bottom: 4px;
}

.name {
  font-weight: 500;
  color: #333;
}

.demo {
  color: #999;
  font-size: 12px;
  margin: 0 5px;
}

.action-btn {
  margin-left: auto;
  color: #409EFF;
  padding: 0 8px;
}

.id-number {
  color: #999;
  font-size: 12px;
  margin-top: 2px;
}

/* 日历特殊日期标记 */
.marked-day {
  background-color: #409EFF;
  color: white;
  border-radius: 50%;
  width: 24px;
  height: 24px;
  line-height: 24px;
  margin: 0 auto;
}

/* 调整日历整体高度 */
:deep(.el-calendar) {
  --el-calendar-cell-width: 32px;
  --el-calendar-cell-height: 32px;
}

/* 调整日期单元格 */
:deep(.el-calendar-day) {
  height: var(--el-calendar-cell-height) !important;
  line-height: var(--el-calendar-cell-height) !important;
  padding: 0 !important;
}

/* 优化日期数字显示 */
.calendar-day {
  font-size: 14px;
  font-weight: 400;
}

/* 特殊日期标记适配新高度 */
.marked-day {
  width: 24px;
  height: 24px;
  line-height: 24px;
  margin-top: 2px;
}

/* 调整日历头部 */
:deep(.el-calendar__header) {
  padding: 8px 0;
}

/* 星期显示优化 */
:deep(.el-calendar__header) td {
  font-size: 12px;
  color: #666;
  padding: 4px 0;
}

/* 去掉默认边框 */
:deep(.el-calendar-table) td {
  border: none !important;
}

/* 调整月份标题 */
:deep(.el-calendar__title) {
  font-size: 16px;
  color: #333;
  padding-left: 8px;
}
</style>